<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="UTF-8">
	<title>面板示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script src="../mock-min.js" type="text/javascript"></script>
</head>
<body>
	<style>
		label.radio, label.checkbox{margin: 0px;}
		label.checkbox, label.hischeckbox_square-blue.radio {
    		background-position-x: -2px;
		}
	</style>
	<h2>数据网格-点击修改</h2>
	<h3>说明:</h3>
	<span>编辑列表中<code>text</code>,<code>textarea</code>,<code>checkbox</code>,<code>numberbox</code>,<code>validatebox</code>,<code>datebox</code>,<code>datetimebox</code>,<code>combobox</code>,<code>combotree</code>,<code>combogrid</code>,<code>icheckbox</code>,<code>switchbox</code>,<code>linkbutton</code>,<code>lookup</code,<code>timespinner</code>,<code>timeboxq</code>组件的使用示例</span>
	<h3>一、数据列表编辑-基于已有编辑类型</h3>
	<div class="use-prettyprint" prettyprintfor="#mydg1codehtml">
		<table id="dg" class="hisui-datagrid" title="点击编辑列表" style="width:1200px;height:300px"
		data-options="toolbar:[],singleSelect: true,
		headerCls:'panel-header-gray',onClickRow: onClickRow,iconCls:'icon-paper',url: 'data.csp'">
		<thead>
		<tr>
			<th data-options="field:'patid',width:60">病人Id</th>
			<th data-options="field:'feetypeid',width:100,
					formatter:function(value,row){
						return row.feetypename;
					},
					editor:{
						type:'combobox',
						options:{
							valueField:'feetypeid',
							textField:'feetypename',
							method:'get',
							url:'feetype.csp',
							required:true,
							blurValidValue:true
						}
					}">费用类型combobox</th>
			<th data-options="field:'feeprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">价格(numberbox)</th>
			<th data-options="field:'feetotal',width:80,align:'right',editor:'numberbox'">数量numberbox</th>
			<th data-options="field:'note',width:200,editor:{type:'textarea',options:{required:true,height:'60px'}}">说明(text)</th>
			<th data-options="field:'active',width:60,align:'center',editor:{type:'checkbox',options:{on:'Y',off:'N'}}">激活checkbox</th>
			<th data-options="field:'active1',width:60,align:'center',editor:{type:'icheckbox',options:{on:'Y',off:'N'}}">激活icheckbox</th>
			<th data-options="field:'active2',width:60,align:'center',editor:{type:'switchbox',options:{onClass:'primary',offClass:'gray',onText:'启用',offText:'禁用'}}">开关switchbox</th>
			<th data-options="field:'op',width:140,align:'center',editor:{type:'linkbutton',options:{iconCls:'icon-w-edit',handler:function(){endEditing();}}}">按钮linkbutton</th>
			<th data-options="field:'dbq',width:120,align:'center',editor:{type:'dateboxq'}">日期q</th>
			<th data-options="field:'timesp',width:80,align:'center',editor:{type:'timespinner'}">时间</th>
			<th data-options="field:'timebq',width:80,align:'center',editor:{type:'timeboxq'}">时间q</th>
		</tr>
		</thead>
		</table>
	</div>
	<script type="text/javascript" class="use-prettyprint" prettyprintfor="#mydg1codejs">
	var editIndex=undefined;
	var modifyBeforeRow = {};
	var modifyAfterRow = {};
	function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				debugger
				//列表中下拉框实现，修改后把回写feetypename，因为formatter显示的是feetypename字段
				var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'feetypeid'});
				var feetypename = $(ed.target).combobox('getText');
				$('#dg').datagrid('getRows')[editIndex]['feetypename'] = feetypename;
				$('#dg').datagrid('endEdit', editIndex);
				modifyAfterRow = $('#dg').datagrid('getRows')[editIndex];
				var aStr = JSON.stringify(modifyAfterRow);
				var bStr = JSON.stringify(modifyBeforeRow);
				if(aStr!=bStr){
					console.log('修改前：');
					console.dir(modifyBeforeRow);
					console.log('修改后：');
					console.dir(modifyAfterRow);
				}
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
	function onClickRow(index){
		if (editIndex!=index) {
			if (endEditing()){
				$('#dg').datagrid('selectRow', index)
						.datagrid('beginEdit', index);
				editIndex = index;
				modifyBeforeRow = $.extend({},$('#dg').datagrid('getRows')[editIndex]);
			} else {
				$('#dg').datagrid('selectRow', editIndex);
			}
		}
	}
	</script>
	<script type="text/javascript">
	Mock.mock("data.csp",{
		"rows|10":[{
			"patid|+1":100,
			"feetypeid":1,
			"feetypename":"自费",
			"feeprice":1.9,
			"feetotal":10,
			"note":"此处写入说明",
			"active":/[YN]/,
			"active1":/[YN]/,
			"active2":/禁用|启用/,
			"op":"结束编辑",
			"dbq":'2020-07-15',
			"timesp":"8:30",
			timebq:"9:30"
		}],
		"total":10
	})
	Mock.mock("feetype.csp",
		[{"feetypeid":1,'feetypename':'自费'},{"feetypeid":2,'feetypename':'职工'},{"feetypeid":3,'feetypename':'医保'}]
	);
	</script>
	<pre class="hide lang-html" id='mydg1codehtml'></pre>
	<pre class="hide lang-js" id='mydg1codejs'></pre>

	<h3>二、数据列表编辑-实现自己的编辑器(<code>20180830</code>)</h3>
	<div class="use-prettyprint" prettyprintfor="#mydg2codehtml">
		<table id="dg2" class="hisui-datagrid" title="点击编辑列表" style="width:300px;height:300px"
		data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',singleSelect: true,url:'data2.csp',
		method: 'get',rownumbers:true,onClickRow: onClickRow2,toolbar:[]">
		<thead>
		<tr>	
			<th data-options="field:'grantBtnGroup',width:250,editor:{type:'mybtns',options:{on:'1',off:'0'}},formatter:function(value,row){
				var valArr = value.split('#');
				var rtnArr = [];
				$.each(valArr,function(i,item){
					var itemArr = item.split('^');
					if (itemArr[2]==1) rtnArr.push(itemArr[1]);
				});
				return rtnArr.join();
			},">授权</th>
		</tr>
		</thead>
		</table>
	</div>
	<script type="text/javascript"  class="use-prettyprint" prettyprintfor="#mydg2codejs">
	$.extend($.fn.datagrid.defaults.editors, {
		mybtns: {
			// "grantBtnGroup":"id1^保存^1#id2^删除^0#id3^打印^0#id4^新建^1"
			init: function (_662, _663) {
				var opt = $.extend({on:'on',off:'off'},_663);
				var _664 = $("<div></div>").appendTo(_662);
				//_664.checkbox(opt);
				_664.data("opt",opt);
				return _664;
			}, getValue: function (initRtnObj) {
				var rtnArr = [];
				initRtnObj.find("input[type='checkbox']").each(function(){
					var lbl = $(this).attr('label');
					var id = $(this).attr('id');
					var chck = $(this).next('label').hasClass('checked');
					chck = chck?1:0;
					rtnArr.push(id+"^"+lbl+"^"+chck);
				});
				return rtnArr.join("#");
			}, setValue: function (initRtnObj, val) {
				var btnArr = val.split("#");
				var opt = initRtnObj.data("opt");
				$.each(btnArr,function(i,item){
					var itemArr = item.split("^");
					$("<input type=\"checkbox\" id="+itemArr[0]+" label="+itemArr[1]+">").appendTo(initRtnObj).checkbox({checked:itemArr[2]==1?true:false});
				});
			}
		}
	});
	var editIndex2=undefined;
	var modifyBeforeRow2 = {};
	var modifyAfterRow2 = {};
	function endEditing2(){
		if (editIndex2 == undefined){return true}
		if ($('#dg2').datagrid('validateRow', editIndex2)){
			$('#dg2').datagrid('endEdit', editIndex2);
			modifyAfterRow2 = $('#dg2').datagrid('getRows')[editIndex2];
			var aStr = JSON.stringify(modifyAfterRow2);
			var bStr = JSON.stringify(modifyBeforeRow2);
			if(aStr!=bStr){
				console.log('表格二修改前：');
				console.dir(modifyBeforeRow2);
				console.log('表格二修改后：');
				console.dir(modifyAfterRow2);
				$.messager.popover({msg:'保存成功',type:'success'});
			}
			//去除授权列修改标志
			$("#dg2").datagrid("getPanel").find("tr.datagrid-row[datagrid-row-index="+editIndex2+"]>td[field='grantBtnGroup']").removeClass("datagrid-value-changed");
			editIndex2 = undefined;
			return true;
		} else {
			return false;
		}
	}
	function onClickRow2(index){
		if (editIndex2!=index) {
			if (endEditing2()){
				$('#dg2').datagrid('selectRow', index)
						.datagrid('beginEdit', index);
				editIndex2 = index;
				modifyBeforeRow2 = $.extend({},$('#dg2').datagrid('getRows')[editIndex2]);
			} else {
				$('#dg2').datagrid('selectRow', editIndex2);
			}
		}
	}
	</script>
	<script type='text/javascript'>
	Mock.mock("data2.csp",{
		"rows|10":[{
			"grantBtnGroup":"id1^保存^1#id2^删除^0#id3^打印^0#id4^新建^1" //|(复制^0#新建^0)/
		}],
		"total":10
	})
	</script>
	<pre class="hide lang-html" id='mydg2codehtml'></pre>
	<pre class="hide lang-js" id='mydg2codejs'></pre>
	<table class="table">
		<tr>
			<th colspan="4">增加列编辑类型</th>
		</tr>
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>text</td>
			<td>解析成原生input</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>textarea</td>
			<td>解析成原生textarea</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>checkbox</td>
			<td>解析成原生checkbox</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>numberbox</td>
			<td>解析成numberbox</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>validatebox</td>
			<td>解析成validatebox</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>datebox</td>
			<td>解析成datebox组件</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>datetimebox</td>
			<td>解析成datetimebox</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>combobox</td>
			<td>解析成combobox</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>combotree</td>
			<td>解析成combotree</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>combogrid</td>
			<td>解析成combogrid</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>icheckbox</td>
			<td>解析成checkbox组件，非原生checkbox</td>
			<td>显示显示'on'|'off'</td>
			<td>返回on|off</td>
		</tr>
		<tr>
			<td>linkbutton</td>
			<td>解析成linkbutton组件</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>switchbox</td>
			<td>解析成switchbox组件</td>
			<td>默认显示'开'|'关'，定义项见switchbox组件</td>
			<td>返回onText|offText</td>
		</tr>
		<tr>
			<td>timespinner</td>
			<td>解析成timespinner组件</td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<prettyprint />	
</body>
</html>